<template>
	<Card>
		<Button type="error" icon="ios-refresh" @click="onRefreshData">刷新</Button>
    <div class="ivu-inline-block ivu-fr">
      <Dropdown @on-click="onChangeTableSize" trigger="click">
        <Tooltip class="ivu-ml" content="密度" placement="top">
          <i-link>
            <Icon type="md-list" />
          </i-link>
        </Tooltip>
        <template #list>
          <DropdownMenu>
            <DropdownItem name="default" :selected="tableSize === 'default'">默认</DropdownItem>
            <DropdownItem name="large" :selected="tableSize === 'large'">宽松</DropdownItem>
            <DropdownItem name="small" :selected="tableSize === 'small'">紧凑</DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
      <Tooltip class="ivu-ml" :content="tableFullscreen ? '退出全屏' : '全屏'" placement="top">
        <i-link @click="onFullscreen">
          <Icon :custom="tableFullscreen ? 'i-icon i-icon-exit-full-screen' : 'i-icon i-icon-full-screen'" />
        </i-link>
      </Tooltip>
      <Tooltip class="ivu-ml" content="刷新" placement="top">
        <i-link @click="onRefresh">
          <Icon custom="i-icon i-icon-refresh" />
        </i-link>
      </Tooltip>
      <Dropdown trigger="click">
        <Tooltip class="ivu-ml" content="列设置" placement="top">
          <i-link>
            <Icon type="md-options" />
          </i-link>
        </Tooltip>
        <template #list>
          <DropdownMenu>
            <div class="ivu-p-8">列展示</div>
            <Divider size="small" class="ivu-mt-8 ivu-mb-8" />
            <li class="ivu-dropdown-item" v-for="item in dropdownColumns" :key="item.title"
              @click="item.show = !item.show">
              <Checkbox v-model="item.show"></Checkbox>
              <span>{{ item.title }}</span>
            </li>
          </DropdownMenu>
        </template>
      </Dropdown>
    </div>
    <Table :columns="tableColumns" :data="list" :loading="loading" :size="tableSize" class="ivu-mt"/>
    <div class="ivu-mt ivu-text-center">
      <Page :total="total" v-model="pageNum" show-total show-sizer show-elevator :page-size="pageSize"
        @on-change="onChangePage" @on-page-size-change="onChangePageSize" />
    </div>
	</Card>
</template>
<script>
import { getDeviceModelList, refreshDeviceModelList } from '@api/smart-device-list'

export default {
	data() {
		return {
			loading: false,
			list: [],
			pageNum: 1,
			pageSize: 10,
			total: 0,
			tableSize: 'small',
			tableFullscreen: false,
		}
	},
	computed: {
		columns() {
			return [
				{ title: '信号名称', key: 'signalName' },
				{ title: '信号编码', key: 'signalCode' },
				{ title: '信号类型', key: 'signalType' },
				{ title: '所属产品', key: 'productName' },
				{ title: '更新时间', key: 'updateTime' },
			]
		},
		tableColumns() {
			const columns = [...this.columns];
			return columns
		},
		dropdownColumns() {
			return this.columns.filter(item => item.title)
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			if (this.loading) return;
			this.loading = true;
			const response = await getDeviceModelList({
				pageSize: this.pageSize,
				pageNum: this.pageNum,
			})
			this.list = response.records || []
			this.total = response.total;
			this.loading = false;
		},
		onChangeTableSize(size) {
			this.tableSize = size;
		},
		onFullscreen() {
			this.tableFullscreen = !this.tableFullscreen;
			this.$emit('on-fullscreen', this.tableFullscreen);
		},
		onRefresh() {
			this.getData();
		},
		onChangePage(page) {
			this.pageNum = page;
			this.getData();
		},
		onChangePageSize(size) {
			this.pageNum = 1;
			this.pageSize = size;
			this.getData();
		},
		onSearch() {
			this.pageNum = 1;
			this.getData();
		},
		async onRefreshData() {
			await refreshDeviceModelList({})
			this.onSearch()
		}
	}
}
</script>
